<template>
  <div class="teamTable">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark titleName">
          <h2><span class="fa fa-table" style="padding-right: 10px"></span>队伍信息管理</h2>
        </div>
      </el-col>
    </el-row>
    <el-row class="searchRow">
      <el-col :span="14">
        <span style="font-weight: bold">队伍名称：</span>
        <el-input v-model="input" placeholder="请输入内容" style="width: 200px;margin-right: 15px"></el-input>
        <span style="font-weight: bold">救援队伍类型：</span>
        <el-select v-model="value" placeholder="请选择" style="width: 200px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" style="margin-left: 15px"><i class="fa fa-search" style="padding-right: 5px"></i>查询
        </el-button>
      </el-col>
      <el-col :span="10" class="plusAndMinus" style="text-align: right">
        <el-button type="success"><i class="fa fa-plus" style="padding-right: 5px"></i>添加单行</el-button>
        <el-button type="danger"><i class="fa fa-minus" style="padding-right: 5px"></i>批量删除</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="listTable">
        <div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column prop="name" label="队伍名称" width="200px" sortable>
            </el-table-column>
            <el-table-column prop="type" label="救援队伍类型" width="300px" sortable>
            </el-table-column>
            <el-table-column prop="area" label="行政区划" width="" sortable>
            </el-table-column>
            <el-table-column prop="location" label="单位地址" width="" sortable>
            </el-table-column>
            <el-table-column label="操作" width="150px">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="block" style="padding: 0 25px;float: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "teamTable",
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
        input: '',
        tableData: [{
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }, {
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }, {
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }, {
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }, {
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }, {
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }, {
          name: '红星队伍',
          type: '类型A',
          area: '新疆吐鲁番',
          location: '吐鲁番地区泉湖路七泉湖',
        }],
        multipleSelection: [],
        editFormVisible: false,
        editForm: {},
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(111);
      },
      handleEdit(index, row) {
        console.log(222);
        console.log(index, row);
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        console.log(Object.assign({}, row));
      },
      handleDelete(index, row) {
        console.log(333);
        console.log(index, row);
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style scoped>
  .titleName {
    color: #fff;
    background-color: #409EFF;
    padding: 1px 10px;
  }

  .searchRow, .plusAndMinus {
    padding: 15px;
  }
</style>
